<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 父组件向 子组件传递方法 使用的是事件绑定机制 v-once 当我们自定义了一个事件属性之后 那么子组件就能够 通过某些方式来调用 我们传递进去的方法了 -->
            <com2 @func="show" ></com2>
            
        </div>
        <template id="tmpl">
                <div>

                    <h1 >这是子组件</h1>
                    <button @click="myclick">子组件的按钮</button>
                </div>
            </template>
        <script>

            // 定义了 一个字面量的组件模板
            var com2 = {
                template: '#tmpl', //指定了一个id 要去加载指定的id template元素的内容 当做组件的html结构
                data() {
                    return {
                        sonmsg: {name: '大头', age : 5}
                    }
                },
                methods: {
                    myclick() {
                        // 当点击子组件的按钮的时候 调用父组件传递过来的方法 并调用这个方法
                        // emit 意思是触发调用的意思
                        this.$emit('func', this.sonmsg)
                    }
                },
            }

            

            new Vue({
                el: '#app',
                data: {
                    datamsg: null
                },
                methods:{
                    show(data) {
                        console.log('调用了父组件show方法'+data)
                        console.log(data)
                        this.datamsg = data

                    }
                },
                components: {
                    com2
                }
            })
        </script>
    </body>
</html>